<template>
	<div class="decorate-xcxlink"
		:style="{padding:tplItemData.modulePadding + 'px ' + tplItemData.levelPadding + 'px'}" >
		<div class="xcxlink-box" >
			<div v-for="(item,index) in tplItemData.dataset" :key="index" class="xcxItem" @click="openXcx(item.appid, item.pageurl)">
				<a href="javascript:;">
					<img :src="item.pic?item.pic:'https://img.wifenxiao.com/h5-wfx/images/noImg.png'" alt="" />
				</a>
				<div class="xcxlink-title">{{item.showtitle}}</div>
			</div>
		</div>
		<!-- 授权弹出框 -->
    	<small-login ref="smalllogin"></small-login>
	</div>
</template>

<script>
import Vue from 'vue'
import small from '@/smallapp/small'
import SmallLogin from '@/components/SmallLogin/smallLogin'
import { getMemberInfo } from '@/api/user/member/memberApi'
export default Vue.extend({
	name: 'index',
	props: {
		tplItemData: {
			type: Object // 传入参数的类型
		}
	},
	components: {
	    SmallLogin,
	},
	data() {
		return {
			
		}
	},
	methods: {
		openXcx(appid, path){
			const isOpenJump=small.wxCache('is_open_jump')
			if(isOpenJump!=1){
				wx.showModal({
					content: '商家暂未开启小程序跳转功能',
					showCancel: false,
					success: (res) => {}
				})
				return false
			}
			if(appid){
				

				if (small.wxCache('jump_applet_parameter_ransfer')==1){
					
					// 用户授权成功后调用
			        window.$$subscribe('loginReload', reload => {
			          if (reload) {
			          	getMemberInfo().then(res => {
					        if (res.status == 1) {
					          const data = res.data
					          const mobile = data.user_info.mobile
					          if(mobile==""){
					          	window.$$subscribe('jump_applet_parameter_x', reload => {
								  // console.log('用户没有手机号,刚刚录入完手机号,刚刚登陆')
						          if (reload) {
						            this.init(appid)
						          }
						        })
					          }else{
					          	this.init(appid)
					          }
					        } else {
					          this.$Error(res.msg)
					        }
						})
			            
			          }
			        })

					if (!small.checkLogin()) {
					    // 未登录
						this.$refs.smalllogin.openSmallLoginPop()

					}else{ //已登陆
						this.init(appid)
					}
				}else{
					// console.log('未开启插件，直接跳转吧')
					// 跳转小程序
					wx.navigateToMiniProgram({
						appId: appid,
						path,
						success(res) {
							// 打开成功
							// console.log(res)
						},
						fail(error) {
							wx.showModal({
								content: '跳转失败，请重试',
								showCancel: false,
								success: (res) => {}
							})
						}
					})	
				}

			}else{
				wx.showModal({
					content: '商家暂未设置小程序跳转信息',
					showCancel: false,
					success: (res) => {}
				})
			}
		},
		init(appid){
			// console.log('走到这里了呢')
			getMemberInfo().then(res => {
		        if (res.status == 1) {
		          const data = res.data
		          var mobile = data.user_info.mobile
		          const nickname = data.user_info.nickname
		          const unionid = data.user_info.openid
		          if(mobile == false){
		          	mobile = ''
		          }
		          // 跳转小程序
					wx.navigateToMiniProgram({
						appId: appid,
						// path: 'pages/merchantAddress/merchantAddress',
						extraData: {
							phone: mobile,
							nickname: nickname,
							unionid: unionid
						},
						envVersion: 'trial',
						success(res) {
							// 打开成功
							// console.log("--------------跳转成功")
							// console.log(res)
						},
						fail(error) {
							// console.log("--------------跳转失败",error)
							//wx.showModal({
							//	content: '跳转失败，请重试',
							//	showCancel: false,
							//	success: (res) => {}
							//})
							
						}
					})
		        } else {
		          this.$Error(res.msg)
		        }
			})
		}
	},
	beforeDestroy() {
    	window.$$unsubscribe('loginReload')
  	},
})
</script>

<style lang='scss'>
.decorate-xcxlink{
	.xcxlink-box{
		img{
			width: 100%;
			display: block;
		}
	}
  .xcxlink-title{
		font-size:24px;
		line-height:1.6;
		color:#333;
		text-align:left;
  }
}
</style>
